<script setup>
import { onMounted } from 'vue'
import { FEEDBACK_URL } from '@/constants'
import SvgIcon from '@/components/SvgIcon.vue'
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import steps from './steps'
let driver = null
onMounted(() => {
  driver = new Driver({
    // 禁止点击蒙版关闭
    allowClose: false,
    closeBtnText: '关闭',
    nextBtnText: '下一个',
    prevBtnText: '上一个'
  })
})
const onGuideClick = () => {
  driver.defineSteps(steps)
  driver.start()
}

const onToFeedback = () => {
  window.open(FEEDBACK_URL, '_blank')
}
</script>
<template>
  <div class="fixed bottom-24 right-6">
    <div
      @click="onGuideClick"
      class="guide rounded-full bg-slate-400 w-8 h-8 flex justify-center items-center mb-4"
    >
      <SvgIcon name="guide" class="w-6 h-6" />
    </div>
    <div
      class="feedback rounded-full bg-slate-400 w-8 h-8 flex justify-center items-center"
    >
      <Popover>
        <SvgIcon name="feedback" class="w-6 h-6" />
        <template #content>
          <div class="w-24 flex items-center border-2" @click="onToFeedback">
            <SvgIcon name="feedback" class="w-4 h-4 mr-2" />
            <span>立即吐槽</span>
          </div>
        </template>
      </Popover>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.driver-fix-stacking {
  position: fixed;
  z-index: 100004 !important;
}
</style>
